<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- logo -->
        <div
          style="
            width: 200px;
            height: 60px;
            background-color: #fff;
            display: flex;
          "
        >
          <img
            src="../../assets/images/logo.png"
            alt=""
            style="
              width: 160px;
              height: 40px;
              background-color: #fff;
              margin: auto;
            "
          />
        </div>

        <!-- menu -->
        <el-menu
          active-text-color="#ffd04b"
          background-color="#33455a"
          class="el-menu-vertical-demo"
          :default-active="activePath"
          text-color="#fff"
          :collapse="isCollapse"
          :router="true"
        >
          <el-menu-item v-for="item in menuArr" :index="item.path" @click="fn">
            <el-icon><icon-menu /></el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右边 -->
      <el-container>
        <el-header>
          <div class="collapse" @click="collapse">
            <el-icon><Back /></el-icon>
          </div>

          <Tabs />
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import Tabs from "./components/Tabs.vue";

import { ref, watch } from "vue";
import { useRoute } from "vue-router";

import { useTabs } from "../../stores/tabs";

const route = useRoute();
const store = useTabs();

interface MenuItemRegistered {
  index: string;
  title: string;
  indexPath: string[];
  active: boolean;
}

const menuArr = [
  {
    path: "index",
    title: "首页",
  },
  {
    path: "banner",
    title: "轮播图管理",
  },
  {
    path: "type",
    title: "商品类别管理",
  },
  {
    path: "product",
    title: "商品管理",
  },
  {
    path: "user",
    title: "用户管理",
  },
  {
    path: "sale",
    title: "销量管理",
  },
  {
    path: "map",
    title: "地图管理",
  },
];
const isCollapse = ref(false);
const collapse = () => {
  isCollapse.value = !isCollapse.value;
};

const fn = (item: MenuItemRegistered) => {
  // console.log(item.index + "!!!");
  menuArr.forEach((val) => {
    if (val.path === item.index) {
      // console.log(val.title);
      store.addTab(item.index, val.title);
    }
  });
};

const activePath = ref("index");
watch(route, (val) => {
  const arr = val.path.split("/");
  // console.log(arr[arr.length - 1]);
  activePath.value = arr[arr.length - 1] || "index";
});
</script>

<style scoped lang="less">
.el-container {
  height: 100vh;
}

.el-aside {
  background-color: #33455a;
  transition: all 0.4s;
}

.el-header {
  background-color: #33455a;
  padding: 0;
  position: relative;
}

.collapse {
  width: 50px;
  height: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;

  &:hover {
    background-color: rgb(41, 55, 72);
  }
}

.el-menu {
  border-right: none;
}
</style>
